<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01_HelloWorld</title>
  </head>
  <body>
    <!--
      1. 引入Vue.js
      2. 创建Vue对象
        el : 指定根element(选择器)
        data : 初始化数据(页面可以访问)
      3. 双向数据绑定 : v-model
      4. 显示数据 : {{xxx}}
      5. 理解vue的mvvm实现
    -->

    <!-- 模板页面 -->
    <div id="root">
      <input type="text" v-model="message" />
      <!-- 插值语法 -->
      <p>{{ message }}</p>
      <!-- <p>{{ msg }}</p> -->
    </div>
    <!-- 1. 引入Vue.js - bootCDN网址 -->
    <script src="../js/vue.js"></script>
    <script>
      /*
        一旦Vue.js，全局多一个构造函数Vue

        模板：
          1. 模板页面
          2. 模板语法
            - 插值语法/双大括号表达式
              - 语法：{{ JS表达式 }}
              - 作用：用来展示JS动态数据
              - 注意：只能用于标签内，不能用于标签属性
                JSX: <button onClick={this.handleClick}>{ aaa }</button>
                Vue: <button>{{ aaa }}</button>

              - 表达式与语句
                - 表达式
                  - 有返回值
                  - 没有分号
                - 语句
                  - 没有返回值
                  - 有分号（可以省略）

                - const fn = () => {}; 语句
                - const fn = () => {}  函数表达式语句
                - fn    表达式
                - fn()  表达式
                - if (true) {} 语句
                - a > 1 表达式

          - 指令语法
            - 语法：v-xxx="JS表达式"
            - 作用：
              v-model 用来数据双向绑定
            - 使用：作为标签属性
              

            - MVC
              - M - Model 数据层：数据读写
              - V - View  视图层：页面
              - C - Controller 控制层
                - 当服务器接受请求，由控制层处理，控制层接受处理请求
                - 先去数据层中查询数据，再去视图层找到要渲染的页面
                - 将数据渲染到页面上，返回渲染完成的页面给客户端

                - M - C - V

            - MVVM  （Vue）
              - M - Model 数据层：data、methods、computed...
              - V - View  视图层：模板页面
              - VM - ViewModel 视图模型层
                - M - VM - V
                  - 数据由（Model）数据层经过（ViewModel）视图模型层的操作流向（View）视图层
                  - 给元素绑定value属性，读取data中的数据，渲染元素value属性上
                - V - VM - M
                  - 数据由（View）视图层经过（ViewModel）视图模型层的操作流向（Model）数据层
                  - 给元素绑定input事件，在事件中收集到（e.target.value）视图层修改的数据，修改data中的数据
                - 这个过程只要绑定v-model指令，vue会帮你自动完成

            - 响应式：Vue中data数据是响应式
              - 更新数据时，数据会变化，同时用户界面也会变化

      */
      const msg = "Hello Vue";

      new Vue({
        // 配置对象：属性名往往是固定的
        el: "#root", // element 元素
        // el: document.getElementById("root"), // element 元素
        // el: "root", // 说明：内部通过document.querySelector获取DOM元素的
        data: {
          // 数据：定义动态数据
          message: msg,
        },
      });
    </script>
  </body>
</html>
